import React, { FC, Suspense, useState } from 'react';
import {
  FormPanel,
  FormPanelStatus,
  FormPanelBtnAlign,
  FormPanelBtnDisplay,
  type FormPanelObject,
  InputType,
} from 'lfun-bg-comp';
import { useNavigate } from 'react-router-dom';
import { Button } from 'antd';
import _ from 'lodash';
import { YES_NO } from '@/constant/basicOptions';
import styles from './index.less';
import { ETHNICITIES } from '@/constant/ethnicity';
import {
  RELIGIOUS_BELIEF,
  HEALTH_CONDITION,
  BLOOD_TYPE,
  HOUSEHOLD_STATUS,
  POLITICAL_STATUS,
  ENROLLMENT_METHOD,
} from '@/constant/studentOptions';
import utils, { getPathRoot } from '@/utils';
import { countries } from '@/constant/country';
import { getClassesOptionsBySchool, getGradesOptionsBySchool, getProvinceCityCascader } from '@/service/options';
import { HMOTF_TYPE } from '@/constant/teachOptions';

const Groups: FC<{
  value?: any;
  onFinish?: (form: FormPanelObject) => boolean;
  title?: string;
  isEdit?: boolean;
}> = ({ value, onFinish, title = '基本信息', isEdit = true }) => {
  const navigate = useNavigate();
  const [student, setStudent] = useState({});
  React.useEffect(() => {
    if (Object.keys(value).length > 0) {
      setStudent({ ...value });
    }
  }, [value]);
  const list = [
    {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      inputs: [
        {
          label: '国籍/地区',
          name: 'nationality',
          key: 'nationality',
          required: true,
          inputType: InputType.select,
          renderOption: countries,
        },
        {
          label: '学校',
          name: 'school_id',
          key: 'school_id',
          relationFields: ['grade_id'],
          hidden: true,
        },
        {
          label: '年级',
          name: 'grade_id',
          key: 'grade_id',
          relationFields: ['class_id'],
          required: true,
          inputType: InputType.select,
          renderOption: async (form: FormPanelObject) => {
            const res = await getGradesOptionsBySchool(form.getFieldsValue()?.school_id);
            return res;
          },
        },
        {
          label: '班级',
          name: 'class_id',
          key: 'class_id',
          required: true,
          inputType: InputType.select,
          renderOption: async (form: FormPanelObject) =>
            getClassesOptionsBySchool(form.getFieldsValue()?.school_id, form),
        },
        {
          label: '出生地',
          name: 'birthplace_district',
          key: 'birthplace_district',
          inputType: InputType.cascader,
          renderOption: getProvinceCityCascader,
          formatSubmitValue: v => {
            if (_.isArray(v)) return v.join(',');
            return v;
          },
          formatValue: v => {
            if (_.isString(v)) return v.split(',');
            return v;
          },
        },
        {
          label: '籍贯',
          name: 'native_place_district',
          key: 'native_place_district',
          required: true,
        },
        {
          label: '民族',
          name: 'ethnicity',
          key: 'ethnicity',
          required: false,
          inputType: InputType.select,
          renderOption: ETHNICITIES,
        },
        {
          label: '血型',
          name: 'blood_type',
          key: 'blood_type',
          required: false,
          inputType: InputType.select,
          renderOption: BLOOD_TYPE,
        },
        {
          label: '健康状况',
          name: 'health_condition',
          key: 'health_condition',
          required: true,
          inputType: InputType.select,
          renderOption: HEALTH_CONDITION,
        },
        {
          label: '是否残疾人',
          name: 'disabled_person',
          key: 'disabled_person',
          required: false,
          inputType: InputType.select,
          renderOption: YES_NO,
        },
        {
          label: '宗教信仰',
          name: 'religious_belief',
          key: 'religious_belief',
          inputType: InputType.select,
          renderOption: RELIGIOUS_BELIEF,
        },
        {
          label: '政治面貌',
          name: 'political_status',
          key: 'political_status',
          inputType: InputType.select,
          renderOption: POLITICAL_STATUS,
        },
        // {
        //   label: '户口所在地',
        //   name: 'residence_district',
        //   key: 'residence_district',
        //   inputType: InputType.cascader,
        //   renderOption: getProvinceCityCascader,
        //   formatSubmitValue: v => {
        //     if (_.isArray(v)) return v.join(',');
        //     return v;
        //   },
        //   formatValue: v => {
        //     if (_.isString(v)) return v.split(',');
        //     return v;
        //   },
        // },
        {
          label: '户籍地址',
          name: 'residence_address',
          key: 'residence_address',
          required: true,
          inputType: InputType.text,
          textRange: [0, 50],
        },
        {
          label: '户口性质',
          name: 'residence_nature',
          key: 'residence_nature',
          required: true,
          inputType: InputType.select,
          renderOption: HOUSEHOLD_STATUS,
        },
        {
          label: '通信地址',
          name: 'communication_address',
          key: 'communication_address',
          inputType: InputType.cascader,
          renderOption: getProvinceCityCascader,
          formatSubmitValue: v => {
            if (_.isArray(v)) return v.join(',');
            return v;
          },
          formatValue: v => {
            if (_.isString(v)) return v.split(',');
            return v;
          },
        },
        {
          label: '邮政编码',
          name: 'postal_code',
          key: 'postal_code',
        },
        {
          label: '联系电话',
          name: 'contact_number',
          key: 'contact_number',
        },
        {
          label: '电子邮件其他联系方式',
          name: 'email_or_other_contact',
          key: 'email_or_other_contact',
        },
        {
          label: '就读方式',
          name: 'enrollment_method',
          key: 'enrollment_method',
          inputType: InputType.select,
          required: true,
          renderOption: ENROLLMENT_METHOD,
        },
        {
          label: '户口所在地',
          name: 'residence_district',
          key: 'residence_district',
          inputType: InputType.cascader,
          required: true,
          renderOption: getProvinceCityCascader,
          formatSubmitValue: v => {
            if (_.isArray(v)) return v.join(',');
            return v;
          },
          formatValue: v => {
            if (_.isString(v)) return v.split(',');
            return v;
          },
        },
        {
          label: '港澳台侨外',
          name: 'overseas_chinese',
          key: 'overseas_chinese',
          inputType: InputType.select,
          renderOption: HMOTF_TYPE,
        },
        {
          label: '是否留守儿童',
          name: 'left_behind_children',
          key: 'left_behind_children',
          inputType: InputType.radio,
          renderOption: YES_NO,
        },
        {
          label: '是否随迁子女',
          name: 'migrant_children',
          key: 'migrant_children',
          inputType: InputType.radio,
          renderOption: YES_NO,
        },
        {
          label: '是否流动人口',
          name: 'floating_population',
          key: 'floating_population',
          required: true,
          inputType: InputType.radio,
          renderOption: YES_NO,
        },
        {
          label: '是否独生子女',
          name: 'only_child',
          key: 'only_child',
          inputType: InputType.radio,
          renderOption: YES_NO,
        },
        {
          label: '身份证有效期',
          name: 'identity_card_validity_period',
          key: 'identity_card_validity_period',
          inputType: InputType.date,
          formatSubmitValue: v => {
            if (v && v.isValid && v.isValid()) return v.format('YYYY-MM-DD');
            return v;
          },
        },
        {
          label: '特长',
          name: 'specialty',
          key: 'specialty',
        },
        {
          label: '常驻地址',
          name: 'permanent_address',
          key: 'permanent_address',
        },
        {
          label: '入学年月',
          name: 'admission_date',
          key: 'admission_date',
          inputType: InputType.date,
          inputProps: {
            picker: 'month',
          },
        },
      ],
    },
  ];
  return (
    <>
      <div className={`fixed-buttons ${styles.basic_panel}`}>
        <Suspense>
          <FormPanel
            template={[Object.assign(list[0], { title })]}
            values={utils.filterNull(student)}
            btnsAlign={FormPanelBtnAlign.center}
            buttonsDisplay={FormPanelBtnDisplay.block}
            submitBtnText="保存"
            restBtnText="返回"
            formStatus={isEdit ? FormPanelStatus.edit : FormPanelStatus.nonEdit}
            onReset={() => {
              navigate(`${getPathRoot()}/newstudent`);
            }}
            onFinish={(formPanelObject: FormPanelObject) => {
              onFinish(formPanelObject);
            }}
            // buttons={[
            //   <Button
            //     onClick={() => {
            //       navigate(-1);
            //     }}
            //   >
            //     返回
            //   </Button>,
            // ]}
          />
        </Suspense>
      </div>
    </>
  );
};
Groups.defaultProps = {
  value: {},
  onFinish: () => {
    return true;
  },
  title: '基本信息',
  isEdit: true,
};
export default Groups;
